<template>
    <div class="container">
        <div class="box" :style="boxStyle" @mousedown="startDrag">
        </div>
    </div>
</template>

<script setup>
import { reactive, computed } from 'vue';

// 初始位置和尺寸
const position = reactive({ x: 100, y: 100 });
const size = reactive({ width: 200, height: 150 });

// 样式计算
const boxStyle = computed(() => ({
    left: `${position.x}px`,
    top: `${position.y}px`,
    width: `${size.width}px`,
    height: `${size.height}px`
}));

// 拖拽逻辑
let isDragging = false;
let dragStartX = 0;
let dragStartY = 0;


// 开始拖拽
const startDrag = (e) => {
    isDragging = true;
    dragStartX = e.clientX - position.x;
    dragStartY = e.clientY - position.y;
    window.addEventListener('mousemove', drag);
    window.addEventListener('mouseup', stopDrag);
};

// 拖拽中
const drag = (e) => {
    if (!isDragging) return;
    position.x = e.clientX - dragStartX;
    position.y = e.clientY - dragStartY;
    console.log(dragStartX, dragStartY);
    console.log(position.x, position.y);

};

// 停止拖拽
const stopDrag = () => {
    isDragging = false;
};

</script>

<style>
.container {
    position: relative;
    height: 100vh;
}

.box {
    position: absolute;
    border: 2px solid #409eff;
    background: rgba(64, 158, 255, 0.1);
    cursor: move;
}
</style>
